<template>
  <el-dialog :title="form.id == 0?'增加':'修改'" :visible.sync="showFlag1.status" :fullscreen='true'>
    <el-form  ref="formRef" :model="form" label-width="200px" :rules="rules">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
                <el-form-item label="一级分类" prop="first_cateid">
                    <el-select @change="changeCate" v-model="form.first_cateid" placeholder="请选择活动区域">
                        <el-option v-for="s in sortList" :key="s.id" :label="s.catename" :value="s.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" prop="second_cateid">
                    <el-select v-model="form.second_cateid" placeholder="请选择活动区域">
                    <el-option v-for="c in second_cate_list" :key="c.id" :label="c.catename" :value="c.id"></el-option>
                    </el-select>
                </el-form-item>  

                <el-form-item label="商品名称" prop="goodsname">
                    <el-input v-model="form.goodsname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品图片" >
                    <el-upload
                        ref="refUpload"
                        action="#"
                        list-type="picture-card"
                        :on-change="changePicture"
                        :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            <span class="el-upload-list__item-actions">
                                <span
                                class="el-upload-list__item-preview"
                                @click="handlePictureCardPreview(file)"
                                >
                                <i class="el-icon-zoom-in"></i>
                                </span>
                                <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handleDownload(file)"
                                >
                                <i class="el-icon-download"></i>
                                </span>
                                <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handleRemove(file)"
                                >
                                <i class="el-icon-delete"></i>
                                </span>
                            </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                </el-form-item>
                    
                <el-form-item label="商品价格" prop="price">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="市场价格" prop="market_price">
                    <el-input v-model="form.market_price" autocomplete="off"></el-input>
                </el-form-item>
                    

                <el-form-item label="商品规格" prop="specsid">
                    <el-select @change = "changeSpecs" v-model="form.specsid" placeholder="请选择活动区域">
                    <el-option v-for="sp in specsList" :key="sp.id" :label="sp.specsname" :value="sp.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品的属性值" prop="specsattr">
                    <el-select v-model="options" multiple placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.index"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>  
                <el-form-item label="是否新品" prop="isnew">
                      <el-radio-group v-model="form.isnew">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>  
                <el-form-item label="是否热卖" prop="ishot">
                    <el-radio-group v-model="form.ishot">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>  
            </el-tab-pane>
            <el-tab-pane label="商品详情" name="second">
                <el-form-item label="商品描述" prop="description" label-width="100px">
                <wEditor ref="editorRef" id="editor" v-model="form.description" width="100%" height="600"></wEditor>
                </el-form-item>
            </el-tab-pane>
        </el-tabs>  
       
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import wEditor from 'vue-wangeditor'
import { mapState, mapActions } from 'vuex';
import vm from  '../../vm/vm'
export default {
    props: ["showFlag1"],
    computed: {
        ...mapState({sortList: state => state.sort.sortList,specsList: state=>state.specs.specsList})
    },
    created(){
        this.sortListActions();
        this.specsListActions()
        vm.$on("update_goods_brother",
            (res)=>{
                this.showFlag1.status = true;
                this.form = res
                this.options = res.specsattr.split(",")
                setTimeout(()=>{
                    //设置图片
                    this.$refs.refUpload.fileList.push({url:'http://127.0.0.1:3000'+res.img})
                    //描述
                    this.$refs.editorRef.setHtml(res.description)
                },1000)
            }
        )
    },
    components: {
        wEditor
    },
    methods: {
        changePicture(file){
            this.form.img = file.raw
        },
        reset(){
            this.form = {
                id: 0,
                first_cateid: "",
                second_cateid: "",
                goodsname: "",
                price: "",
                market_price: "",
                img: "",
                description: "",
                specsid: "",
                specsattr: "",
                isnew: 1,
                ishot: 1,
                status: 1   
            }
            this.$refs.editorRef.setHtml("");
            this.$refs.refUpload.clearFiles();
            this.showFlag1.status = false
        },
        submit(){
            //提交的内容有图片，需要使用formData
            //图片是在选择后，将数据添加到form里
            //富文本有getHtml方法
            this.form.description = this.$refs.editorRef.getHtml();
            this.form.specsattr = this.form.specsattr.join(",")
            var formdate = new FormData()
            for(var i in this.form){
                var obj = this.form[i]
                formdate.append(i,obj)
            }
            this.$refs.formRef.validate(
                (valid)=>{
                    var url = "/goodsadd"
                    this.$http.post(url,formdate).then(
                        res=>{
                            if(res.status == 200){
                                this.reset()
                            }
                        }
                    )
                }
            )
            
            
        },
        changeSpecs(id){
            for(var i in this.specsList){
                var obj = this.specsList[i]
                if(id == obj.id){
                    this.options = obj.attrs
                    break
                }
            }
        },
        changeCate(id){
            for(var i in this.sortList){
                var obj = this.sortList[i]
                if(id == obj.id){
                    this.second_cate_list = obj.children
                    break
                }
            }
            
        },
        ...mapActions("sort",["sortListActions"]),
        ...mapActions("specs",["specsListActions"]),
        //面板切换,
        handleClick(tab, event) {
            console.log(tab, event);
        },
        //图片
        handleRemove(file) {
        console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        }
    },
    data(){
        return {
            //多选下拉框
            second_cate_list:[],
            options: [],

            value1: [],
            //图片变量
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            //面板切换
            activeName: 'first',
            //表单绑定数据
            form: {
                id: 0,
                first_cateid: "",
                second_cateid: "",
                goodsname: "",
                price: "",
                market_price: "",
                img: "",
                description: "",
                specsid: "",
                specsattr: "",
                isnew: 1,
                ishot: 1,
                status: 1                
            },
            rules:{
                first_cateid: {required: true, message:"一级分类不可以为空", trigger: "blur"},
                second_cateid: {required: true, message:"二级分类不可以为空", trigger: "blur"},
                goodsname: {required: true, message:"商品名称不可以为空", trigger: "blur"},
                price: {required: true, message:"价格不可以为空", trigger: "blur"},
                market_price: {required: true, message:"市场价格不可以为空", trigger: "blur"},
                description: {required: true, message:"商品详情不可以为空", trigger: "blur"},
                sepcsid: {required: true, message:"规格不可以为空", trigger: "blur"},
                specsattr: {required: true, message:"规格属性不可以为空", trigger: "blur"},
                isnew: {required: true, message:"是否新不可以为空", trigger: "blur"},
                ishot: {required: true, message:"是否热卖不可以为空", trigger: "blur"},
                status: {required: true, message:"商品状态不可以为空", trigger: "blur"}, 
            }
        }
    }
};
</script>

<style>
</style>